<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro"
>
<head>
    <title>Title</title>
    <base th:href="@{/}">
    <!--引入Layui样式文件-->
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <style>
        .layui-inline {
            margin-right: 15px
        }

        .layui-fluid {
            padding-top: 15px;
        }

        /*layui数据表格复选框修正*/
        .layui-table-view .layui-form-checkbox i {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <!-- 用户列表页头部区域：展示搜索框、搜索按钮、添加按钮、批量删除按钮 -->
    <blockquote class="layui-elem-quote">
        <form class="layui-form">
            <div class="layui-inline">
                <input type="text" id="username" name="username" placeholder="用户名" class="layui-input">
            </div>
            <div class="layui-inline">
                <input type="text" id="nickname" name="nickname" placeholder="昵称" class="layui-input">
            </div>
            <div class="layui-inline">
                <shiro:hasPermission name="user:query">
                    <a class="layui-btn" id="searchBtn">搜索</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="user:add">
                    <a class="layui-btn layui-btn-normal" id="addBtn">添加</a>
                </shiro:hasPermission>
                <shiro:hasPermission name="user:remove">
                    <a class="layui-btn layui-btn-danger" id="removeBatchBtn">批量删除</a>
                </shiro:hasPermission>
            </div>
        </form>
    </blockquote>

    <!-- 数据表格：展示数据，表格中的内容以及数据都是通过js渲染的 -->
    <table id="dataTable" lay-filter="dataTable"></table>

    <!-- 操作数据模板 -->
    <script type="text/html" id="operateBar">
        <shiro:hasPermission name="user:edit">
            <a class="layui-btn layui-btn-sm layui-btn-warm" lay-event="edit">编辑</a>
        </shiro:hasPermission>
        <shiro:hasPermission name="user:remove">
            <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="remove">删除</a>
        </shiro:hasPermission>
    </script>

    <!--dataWindow页面层-->
    <div id="dataWindow" style="display: none;padding: 10px; padding-bottom: 30px">
        <form id="dataForm" class="layui-form" lay-filter="dataForm">
            <!--layui隐藏域存在获取不到值的bug，建议使用下面写法-->
            <input type="text" name="id" style="display: none">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" id="dataFormUsername" name="username" required
                           lay-verify="required|usernameVerify"
                           placeholder="请输入用户名"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" required lay-verify="required|phone" placeholder="请输入手机号"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" required lay-verify="required" placeholder="请输入昵称"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" required lay-verify="required|email" placeholder="请输入邮箱"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">加密盐</label>
                <div class="layui-input-block">
                    <input type="text" name="salt" required lay-verify="required" placeholder="请输入加密盐"
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户状态</label>
                <div class="layui-input-block">
                    <select name="status" lay-verify="required">
                        <option value=""></option>
                        <option value="1">正常</option>
                        <option value="2">禁用</option>
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">用户角色</label>
                <div class="layui-input-block roleIdList">

                </div>
            </div>
            <!--真正提交数据的按钮，由弹出层的yes回调触发-->
            <button id="submitBtn" lay-submit lay-filter="submitBtn" style="display: none">立即提交</button>
        </form>
    </div>
</div>

<!--引入layui.js文件-->
<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">

    //加载模块
    layui.use(['table', 'form', 'layer'], function () {
        var table = layui.table,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //获取前端缓存中的数据
        var userInfo = sessionStorage.getItem('userInfo');
        if (!userInfo) {
            location.href = 'page/login';
        }

        //表格数据渲染
        table.render({
            //id：设定容器唯一 id。id 是对表格的数据操作方法上是必要的传递条件。
            id: 'dataTable',
            elem: '#dataTable',
            //height: 312,
            method: 'get',
            url: 'user/find', //数据接口
            page: true,  //开启分页
            limit: '10', //每页请求的数据
            limits: [10, 20, 30, 40, 50],
            cols: [
                [{type: 'checkbox', width: 50, fixed: 'left'},
                    {field: 'id', title: 'ID', minWidth: 50, fixed: 'left', align: 'center'},
                    {field: 'username', title: '用户名', minWidth: 100, fixed: 'left', align: 'center'},
                    {field: 'mobile', title: '手机号', align: 'center'},
                    {field: 'nickname', title: '昵称', align: 'center'},
                    {field: 'email', title: '邮箱', align: 'center'},
                    {field: 'salt', title: '加密盐', align: 'center'},
                    {
                        field: 'status', title: '用户状态', align: 'center', templet: function (d) {
                            return d.status == '1' ? '正常' : '禁用';
                        }
                    },
                    {title: '操作', minWidth: 150, fixed: 'right', align: 'center', templet: '#operateBar'}]
            ],
            parseData: function (res) { //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.list //解析数据列表
                };
            },
            request: {
                pageName: 'pageNum', //页码的参数名称，默认：page
                limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            response: {
                //规定成功的状态码，默认：0
                statusCode: 200
            }
        });

        //条件查询
        $("#searchBtn").click(function () {
            tableReload();
        });

        $("#addBtn").click(function () {
            //新增无需传递id值
            addOrEdit();
        })

        var window_index = -1; //默认窗体索引值
        function addOrEdit(id) {
            //页面层
            layer.open({
                type: 1,
                title: id ? '修改用户' : '新增用户',
                content: $('#dataWindow'),
                area: ['100%', '100%'],
                maxmin: true,
                btn: ['确定', '取消'],
                yes: function (index) {
                    //如果设定了yes回调，需进行手工关闭
                    //layer.close(index);
                    window_index = index;

                    //点击确定按钮，提交表单数据
                    $("#submitBtn").click();
                },
                success: function () {
                    // 新增用户或修改用户的时候动态渲染角色列表
                    $.ajax({
                        url: 'role/find', // 查询所有角色
                        type: 'get',
                        success(resp) {
                            var str = '';
                            // <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
                            for (var i = 0; i < resp.data.length; i++) {
                                str += `<input type="checkbox" name="roleIdList" title="${resp.data[i].roleName}"
                                        lay-skin="primary" value="${resp.data[i].id}">`
                            }
                            $('.roleIdList').html(str);
                            form.render('checkbox'); //刷新checkbox选择框渲染

                            // 如果是修改操作，那么数据回显
                            if (id) {
                                $.ajax({
                                    url: 'user/find/' + id, // 根据id查询用户的数据
                                    type: 'get',
                                    success(res) {
                                        // 表单回显
                                        form.val('dataForm', res.data)
                                        //手动为用户相关角色信息赋值
                                        $.each($(':checkbox[name="roleIdList"]'), function () { // 拿到所有的角色复选框遍历
                                            this.checked = false;
                                            var list = res.data.roleIdList; // 角色id
                                            if (list && list.length > 0) {
                                                for (var i in list) {
                                                    if (list[i] == this.value) { // 当角色id和复选框id一致了，设置为选中效果
                                                        this.checked = true;
                                                    }
                                                }
                                            }
                                        });
                                        form.render('checkbox', 'dataForm');
                                    }
                                })
                            }
                        }

                    })
                },
                end: function () {
                    window_index = -1; //重置窗体索引默认值
                    //重置表单
                    $('#dataForm')[0].reset();

                    $("#dataFormUsername").prop('readonly', ''); // 不是只读
                    $("#dataFormUsername").attr('lay-verify', 'required|usernameVerify'); // 加载校验规则
                }
            });
        }

        //新增表单提交事件
        form.on('submit(submitBtn)', function (data) {
            //当前容器的全部表单字段，名值对形式：{name: value}
            console.log(data.field)
            //判断表单的id域是否有值，如果有值，执行修改操作，否则执行新增。
            var url = 'user/add', method = 'post';
            if (data.field.id) {
                url = 'user/edit';
                method = 'put';
            }

            // 手动处理用户的角色id，因为layui的复选框即使多选了，只能拿到最后一个
            var array = [];
            // 获取所有已选中的复选框
            $.each($(':checkbox[name=roleIdList]:checked'), function () {
                array.push(this.value)
            })
            data.field.roleIdList = array;

            $.ajax(url, {
                type: method,
                contentType: 'application/json',
                data: JSON.stringify(data.field),
                success: function (res) {
                    if (res.code == 200) {
                        tableReload();
                    }
                    //关闭页面层
                    layer.close(window_index);
                    layer.msg(res.message);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        form.verify({
            usernameVerify: function (value) { //value：表单的值、item：表单的DOM对象
                if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                    return '用户名不能有特殊字符';
                }
                if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                    return '用户名首尾不能出现下划线\'_\'';
                }
                if (/^\d+\d+\d$/.test(value)) {
                    return '用户名不能全为数字';
                }

                //校验用户名唯一性
                var result = '';
                $.ajax('user/findExists/' + value, {
                    async: false,
                    type: 'get',
                    success: function (res) {
                        if (res.code == 401) {
                            result = res.message;
                        }
                    }
                })
                return result;
            }

        });


        $("#removeBatchBtn").click(function () {
            //调用批量删除数据的函数
            removeBatch();
        });

        //工具条事件
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(dataTable)', function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

            if (layEvent === 'remove') { //删除
                remove(data.id);
            } else if (layEvent === 'edit') { //编辑
                //数据回显
                //给表单赋值：dataForm 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
                // form.val("dataForm", data);

                /*
                * 当用户执行编辑操作时：
                *   1、用户名为只读
                *   2、用户名无需唯一校验
                * */
                $("#dataFormUsername").prop('readonly', 'readonly');
                $("#dataFormUsername").attr('lay-verify', '');

                addOrEdit(data.id);
            }

        });

        //单条删除数据的函数
        function remove(id) {
            layer.confirm('确定要删除吗?', function (index) {
                //向服务端发送删除指令
                $.ajax('user/remove/' + id, {
                    type: 'delete',
                    success: function (res) {
                        if (res.code == 200) {
                            layer.msg(res.message);
                            //重载表格数据
                            tableReload();
                        } else {
                            layer.msg(res.message);
                        }
                    }
                })
            });
        }

        //单条删除数据的函数
        function removeBatch() {

            var checkStatus = table.checkStatus('dataTable'); //dataTable 即为基础参数 id 对应的值

            var data = checkStatus.data; //获取选中行的数据

            if (data.length == 0) {
                layer.msg("请选择要删除的数据!");
            } else {
                layer.confirm('确定要删除吗?', function (index) {
                    var ids = [];

                    data.forEach(function (item) {
                        ids.push(item.id);
                    })

                    //向服务端发送删除指令
                    $.ajax('user/remove?ids=' + ids.join(), {
                        type: 'delete',
                        success: function (res) {
                            if (res.code == 200) {
                                layer.msg(res.message);
                                //重载表格数据
                                tableReload();
                            } else {
                                layer.msg(res.message);
                            }
                        }
                    })
                });
            }
        }

        //重载表格的函数
        function tableReload() {
            table.reload('dataTable', {
                //结合后面的搜索使用
                where: {
                    username: $("#username").val(),
                    nickname: $("#nickname").val()
                }
            })
        }
    });
</script>
</body>
</html>